/* 使整个容器具有 3D 效果 */
.auth-container {
    display: flex;
    width: 100%;
    max-width: 400px;
    perspective: 1000px; /* 3D 视角 */
}

/* 翻转效果 */
.auth-box {
    width: 100%;
    display: flex;
    flex-direction: column;
    transition: transform 0.9s;
    transform-style: preserve-3d;
}

/* 翻转时的状态 */
.auth-container.flipped .auth-box {
    transform: rotateY(180deg); /* 翻转 180 度 */
}

.auth-form {
    backface-visibility: hidden; /* 隐藏翻转后的内容 */
}

.auth-form-back {
    transform: rotateY(180deg); /* 使后面的表单翻转 180 度 */
    backface-visibility: hidden; /* 隐藏翻转后的内容 */
}
